<template>
  <BasicDrawer @register="registerBaseDrawer" title="作业票数量清单" width="ref<number>(1200)" destroyOnClose>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
    <a-button class="abtnStyle" type="primary" @click="closeDrawer"> 关闭</a-button>
    
    <!-- 表单区域 -->
    <!-- 动火-->
    <TbJobTicketModalHotWork ref="registerModalHotWork" @success="refresh" />
    <!-- 临时用电-->
    <TbJobTicketModalTemporaryElectricityConsumption ref="registerModalTemporaryElectricityConsumption" @success="refresh" />
    <!-- 受限空间-->
    <TbJobTicketModalRestrictedSpace ref="registerModalRestrictedSpace" @success="refresh" />
    <!-- 吊装-->
    <TbJobTicketModalLifting ref="registerModalLifting" @success="refresh" />
    <!-- 高处-->
    <TbJobTicketModalHigh ref="registerModalHigh" @success="refresh" />
    <!-- 盲板-->
    <TbJobTicketModalBlindPlate ref="registerModalBlindPlate" @success="refresh" />
    <!-- 动土-->
    <TbJobTicketModalBreakGround ref="registerModalBreakGround" @success="refresh" />
    <!-- 断路-->
    <TbJobTicketModalOpenCircuit ref="registerModalOpenCircuit" @success="refresh" />
    
    <!-- 作业票清单-->
    <select-job-ticket-modal ref="selectJobTicketModel"></select-job-ticket-modal>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, watch, unref,reactive } from 'vue';
  import { BasicTable, useTable, TableAction } from '/src/components/Table';
  import { BasicDrawer, useDrawer, useDrawerInner } from '/src/components/Drawer';
  import { useModal } from '/src/components/Modal';
  import { useUserStore } from '/@/store/modules/user';
  import { queryJobCountByEventIdAndJobType,queryJobCode } from '../TbJobTicket.api';
  import { columnsCount } from '../TbJobTicket.data';
  import TbJobTicketModalHotWork from './TbJobTicketModalHotWork.vue'
  import TbJobTicketModalTemporaryElectricityConsumption from './TbJobTicketModalTemporaryElectricityConsumption.vue'
  import TbJobTicketModalRestrictedSpace from './TbJobTicketModalRestrictedSpace.vue'
  import TbJobTicketModalLifting from './TbJobTicketModalLifting.vue'
  import TbJobTicketModalHigh from './TbJobTicketModalHigh.vue'
  import TbJobTicketModalBlindPlate from './TbJobTicketModalBlindPlate.vue'
  import TbJobTicketModalBreakGround from './TbJobTicketModalBreakGround.vue'
  import TbJobTicketModalOpenCircuit from './TbJobTicketModalOpenCircuit.vue'
  import SelectJobTicketModal from './SelectJobTicketModal.vue'

  const emit = defineEmits(['register', 'hideUserList']);
  const props = defineProps({
    disableUserEdit: {type:Boolean,default:false}
  })
  
  const checkedKeys = ref<Array<string | number>>([]);
  const jobActiveRecord = ref<Object>();
  const activeId = ref<String>();
  const [registerBaseDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    console.log("====data=========="+JSON.stringify(data))
    jobActiveRecord.value = data;
    activeId.value = data.id;
    setProps({ searchInfo: { eventsId: data.id,jobType: data.jobType} });
    //reload();
  });
  //注册drawer
  const [registerTable, { reload, setProps, getSelectRows }] = useTable({
    title: '作业票数量清单',
    api: queryJobCountByEventIdAndJobType,
    columns: columnsCount,
    formConfig: {
      //update-begin---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示
      labelWidth: 60,
      //update-end---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示
      autoSubmitOnEnter: true,
    },
    striped: true,
    useSearchForm: true,
    showTableSetting: true,
    clickToRowSelect: false,
    bordered: true,
    showIndexColumn: false,
    // 【issues/1064】列设置的 cacheKey
    tableSetting: { fullScreen: true, cacheKey: 'role_user_table' },
    canResize: false,
    rowKey: 'jobType',
    actionColumn: {
      width: 160,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: undefined,
    },
  });
  const userStore = useUserStore();
  const registerModalHotWork = ref();
  const registerModalTemporaryElectricityConsumption = ref();
  const registerModalRestrictedSpace = ref();
  const registerModalLifting = ref();
  const registerModalHigh = ref();
  const registerModalBlindPlate = ref();
  const registerModalBreakGround = ref();
  const registerModalOpenCircuit = ref();
  const selectJobTicketModel = ref();

  /**
   * 选择列配置
   */
  const rowSelection = {
    type: 'checkbox',
    columnWidth: 50,
    selectedRowKeys: checkedKeys,
    onChange: onSelectChange,
  };
  
  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '开票',
        onClick: handleMake.bind(null, record),
      },
      {
        label: '查看',
        onClick: handleSeach.bind(null, record),
      },
    ];
  }
  
  async function handleMake(record: Recordable){
    /* 这里传参使用从作业活动页面传过来的对象数据，然后需要将单个的作业类型赋值，重新传参*/
    /* 动火作业：1，临时用电：2，吊装作业：3，盲板抽堵：4，动土作业：5，
      断路作业：6，受限空间作业：7，高处作业：8，通用作业：9，带压堵漏：10*/
    await queryJobCode({}).then((result) => {
      // let addData = {
      //   applyCompany: userStore.getUserInfo.orgCode,
      //   applicant: userStore.getUserInfo.username,
      //   number: result,
      // };
      jobActiveRecord.value.number = result;
      jobActiveRecord.value.applyCompany = userStore.getUserInfo.orgCode;
      jobActiveRecord.value.applicant = userStore.getUserInfo.username;
      //jobActiveRecord.value.applyTime = new Date();
      
      jobActiveRecord.value.id = null;//先将作业信息的id置空用雨做开票信息
      jobActiveRecord.value.jobType= record.key
      jobActiveRecord.value.eventsId = activeId.value;
    });
      
    console.log("-----jobActiveRecord-----------"+JSON.stringify(jobActiveRecord))
    if(record.key == "1"){
      registerModalHotWork.value.disableSubmit = false;
      registerModalHotWork.value.edit(jobActiveRecord.value);
    }else if(record.key == "2"){
      registerModalTemporaryElectricityConsumption.value.disableSubmit = false;
      registerModalTemporaryElectricityConsumption.value.edit(jobActiveRecord.value);
    }else if(record.key == "3"){
      registerModalLifting.value.disableSubmit = false;
      registerModalLifting.value.edit(jobActiveRecord.value);
    }else if(record.key == "4"){
      registerModalBlindPlate.value.disableSubmit = false;
      registerModalBlindPlate.value.edit(jobActiveRecord.value);
    }else if(record.key == "5"){
      registerModalBreakGround.value.disableSubmit = false;
      registerModalBreakGround.value.edit(jobActiveRecord.value);
    }else if(record.key == "6"){
      registerModalOpenCircuit.value.disableSubmit = false;
      registerModalOpenCircuit.value.edit(jobActiveRecord.value);
    }else if(record.key == "7"){
      registerModalRestrictedSpace.value.disableSubmit = false;
      registerModalRestrictedSpace.value.edit(jobActiveRecord.value);
    }else if(record.key == "8"){
      registerModalHigh.value.disableSubmit = false;
      registerModalHigh.value.edit(jobActiveRecord.value);
    }
  }
  
  function handleSeach(){
    selectJobTicketModel.value.openModel(activeId.value);
  }
  
  /**
   * 成功回调
   */
  function refresh() {
    reload();
  }

  /**
   * 选择事件
   */
  function onSelectChange(selectedRowKeys: (string | number)[], selectionRows) {
    checkedKeys.value = selectedRowKeys;
  }
</script>

<style scoped>
  /*update-begin---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示*/
  :deep(.ant-form-item-control-input-content){
    text-align: left;
  }
  /*update-end---author:wangshuai ---date:20230703  for：【QQYUN-5685】3、租户角色下,查询居左显示*/
  .abtnStyle{
    float: rignt;
  }
</style>
